import React, {useEffect, useState} from 'react';
import {message, Skeleton} from "antd";
import ProForm, {ProFormText} from "@ant-design/pro-form";
import {LoadingOutlined} from '@ant-design/icons';
import AliyunOssUpdate from "@/components/AliyunOssUpdate";
import {getWebSite, updateSetting} from "@/services/setting";

const WebSite = () => {
  // 初始化数据
  const [initialValues, setInitialValues] = useState()

  // 渲染数据
  useEffect(async () => {
    const response = await getWebSite('website');
    setInitialValues({
      icon: response.icon,
      about: response.about,
      title: response.title,
      phone: response.phone,
      keywords: response.keywords,
      record: response.record
    })
  }, [])

  /**
   * 文件上传成功后 設置表单字段的值
   * @param fileKey
   * @returns {*}
   */
  const [formObj] = ProForm.useForm()
  const setIconKey = fileKey => formObj.setFieldsValue({'icon': fileKey})

  // WebSite 执行更新
  const updateWebSite = async (data) => {
    console.log(data);
    const params = {
      name: 'website',
      icon: data.icon,
      about: data.about,
      title: data.title,
      phone: data.phone,
      keywords: data.keywords,
      record: data.record
    }
    // const response = await updateSetting(params)
    // if (response.status === undefined) {
    //   message.success('修改成功')
    // }
  }

  return (
    <span>
              {
                initialValues === undefined ?
                  <Skeleton avatar paragraph={{rows: 4}}/>
                  :
                  <ProForm
                    onFinish={a => updateWebSite(a)}
                    form={formObj}
                    initialValues={initialValues}
                    submitter={{
                      searchConfig: {
                        submitText: '提交',
                      },
                    }}
                  >
                    <ProForm.Item
                      name="icon"
                      label="icon小图标"
                      rules={[
                        {
                          required: true,
                          message: '请输入关于我们',
                        },
                      ]}
                    >
                      <div>
                        <AliyunOssUpdate
                          accept="image/*"
                          listType="picture-card"
                          setIconKey={setIconKey}
                        >
                          {
                            initialValues.icon ?
                              <img
                                src={initialValues.icon}
                                alt="avatar"
                                style={{width: '100%'}}
                              /> : <LoadingOutlined/>
                          }
                        </AliyunOssUpdate>
                      </div>
                    </ProForm.Item>
                    <ProFormText
                      name="about"
                      label="关于我们"
                      placeholder="请输入关于我们"
                      rules={[
                        {
                          required: true,
                          message: '请输入关于我们',
                        },
                      ]}
                    />
                    <ProFormText
                      name="title"
                      label="标题"
                      placeholder="请输入标题"
                      rules={[
                        {
                          required: true,
                          message: '请输入标题',
                        },
                      ]}
                    />
                    <ProFormText
                      name="phone"
                      label="手机号"
                      placeholder="请输入手机号"
                      rules={[
                        {
                          required: true,
                          message: '请输入手机号',
                        },
                        {
                          pattern: /^1\d{10}$/,
                          message: '不合法的手机号格式!',
                        },
                      ]}
                    />
                    <ProFormText
                      name="keywords"
                      label="关键字"
                      placeholder="请输入关键字"
                      rules={[
                        {
                          required: true,
                          message: '请输入关键字',
                        },
                      ]}
                    />
                    <ProFormText
                      name="record"
                      label="备案信息"
                      placeholder="请输入备案信息"
                      rules={[
                        {
                          required: true,
                          message: '请输入备案信息',
                        },
                      ]}
                    />

                  </ProForm>
              }
        </span>
  );
}
;

export default WebSite;
